<!--
 * @Author: 王灿
 * @Date: 2019-11-30 00:40:05
 * @LastEditTime: 2019-12-01 17:36:40
 * @Description: vip礼包
 * @FilePath: \scarlet-sparrow-admin\src\configure\configure-vip\index
-->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow"/>
    <!-- 咨讯列表 -->
    <happy-scroll color="rgba(0,0,0,0.05)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <el-table-column prop="propertyName" label="礼包名称" />
        <el-table-column prop="propertyValue" label="礼包值" />
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEdit(scope.$index, scope.row.propertyValue)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>

    <!-- 抽屉 -->
    <el-drawer
      :title="tabTitle"
      :visible.sync="isShow"
      :wrapperClosable="false"
      :destroyOnClose="true"
      :show-close="show"
      direction="rtl"
      @open="onOpen"
      @close="onClose"
      @opened="onOpened"
      @closed="onClosed"
      size="80%"
      height="90%"
      ref="drawer"
    >
      <!-- 礼包配置 -->
      <vip-operate :index="index" :propertyName="propertyName" :propertyValue="propertyValue" @onCancelBtn="onCancelBtn" />
    </el-drawer>
  </div>
</template>>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import { getByType } from '@/api/configure.js'
import { storageGetItem } from '@/utils/index.js'
import VipOperate from './vip-operate/index.vue'
export default {
  name: 'ConfigureVip',
  components: { JqTitle, JqPage, VipOperate },
  props: {
    propertyName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: { label: 'VIP礼包配置', flag: false, searchFlag: false },
      tableData: [],
      tabTitle: '编辑礼包',
      // 抽屉开关
      isShow: false,
      // 抽屉关关闭按钮
      show: false,
      // 刷新页面开关
      isRefresh: false,
      index: 0,
      propertyValue: []
    }
  },
  watch: {
    // 监听刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetByType()
      }
    }
  },
  created() {
    this.title.flag = storageGetItem('propertyData').length === 0
    this.onGetByType()
  },
  methods: {
    // 配置列表
    onGetByType() {
      this.tableData = storageGetItem('propertyData')
    },
    // 打开 -- 动画结束回调
    onOpen() {
      if (this.tabTitle !== '编辑礼包') {
        this.tabRow = {}
      }
    },
    onOpened() {
      this.show = true
    },
    // 关闭 -- 动画结束回调
    onClose() {
      this.show = false
    },
    onClosed() {
      this.show = false
      this.isSkuShow = false
      this.productId = ''
    },
    // 父子组件通讯 -- 新增礼包配置
    onTableRow(data) {
      this.tabTitle = '新增礼包'
      this.index = 0
      this.isShow = true
      this.isRefresh = false
    },
    // 编辑
    onEdit(index, propertyValue) {
      this.tabTitle = '编辑礼包'
      this.index = index
      this.propertyValue = JSON.parse(propertyValue)
      this.isShow = true
      this.isRefresh = false
    },
    // 取消 / 成功
    onCancelBtn(data) {
      this.index = 0
      this.propertyValue = []
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh
      this.title.flag = storageGetItem('propertyData').length === 0
    }
  }
}
</script>